<script setup lang="ts">
import { ref } from "vue";
import Fuse from "fuse.js";
const keyword = ref("");
const all = ref<any>([]);
const list = ref<any>([]);
const fuse = new Fuse([], {
    includeScore: true,
    keys: ["title", "description"],
});
const loadData = () => {
    window.ipcRenderer.invoke("getStore", "apps").then((res: any) => {
        all.value = res;
        fuse.setCollection(res);
        onSearch();
        refreshData();
    });
};
const refreshData = () => {
    window.ipcRenderer.invoke("loadData").then((res: any) => {
        all.value = res;
        fuse.setCollection(res);
        onSearch();
    });
};
const onSearch = () => {
    if (keyword.value == "") {
        list.value = all.value;
        return;
    }
    let res = fuse.search(keyword.value);
    let items: any = [];
    for (let i = 0; i < res.length; i++) {
        items.push(res[i].item);
    }
    list.value = items;
};
loadData();
const onDownload = (name: string) => {
    window.ipcRenderer.send("download", name);
    window.ipcRenderer.on("download", (_event, message) => {
        console.log(message);
    });
};
const onOpen = (name: string) => {
    window.ipcRenderer.send("open", name);
};
</script>

<template>
    <div class="w-full h-screen fixed">
        <el-scrollbar class="w-full h-screen">
            <div class="m-3">
                <div class="w-60 mb-3">
                    <el-input v-model="keyword" @input="onSearch" placeholder="Search" clearable />
                </div>
                <div class="grid gap-3 grid-cols-3 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6" v-auto-animate>
                    <el-card shadow="never" body-class="!p-0" v-for="(item,index) in list" :key="index">
                        <div class="flex items-center gap-3 p-3">
                            <el-avatar :size="45">{{ index }}</el-avatar>
                            <div class="flex-1 w-0">
                                <div class="truncate w-full font-bold text-base">{{ item.title }}</div>
                                <div class="text-gray-500 truncate text-xs mt-2">{{ item.description }}</div>
                            </div>
                        </div>
                        <div class="border-t flex items-center py-1">
                            <el-button @click="onDownload(item.name)" class="flex-1" link type="info">下载</el-button>
                            <el-button @click="onOpen(item.name)" class="flex-1" link type="info">打开</el-button>
                        </div>
                    </el-card>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<style scoped>
</style>
